<template>
  <div id="talk">
    <div class="title"><i class="el-icon-back left" @click="goBack"></i>{{ to.name }}<el-tag v-show="show" @click="addFriend()">加好友</el-tag></div>
    <div id="record">
      <template
        v-for="(item, index) in recordList"
      >
        <record-row :key="index" :from="to" :record="item" :user="from"></record-row>
      </template>
    </div>
    <div id="talkBtn">
      <div class="center">
        <el-input v-model="val" style="width: 60%;" @keydown.enter.native="addRecord()"></el-input>
        <el-button type="success" @click="addRecord">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import recordRow from '@/components/recordRow.vue'
import { queryUserInfo, addRecordApi, queryAllRecord, addFriendsApi } from "./api"
import { Message } from 'element-ui'

export default {
  components: { recordRow },
  data() {
    return {
      to: {},
      from: {},
      val: '',
      recordList: [],
      toFriends: [],
      show: true
    }
  },
  created() {
    const to = this.$route.params.to
    const from = this.$route.params.from
    this.to.uid = to
    this.from.uid = from
    this.queryUserInfo()
    this.queryRecordList()
  },
  methods: {
    queryUserInfo(){
      const data = {
        uids: this.from.uid + ',' + this.to.uid
      }
      console.log(data)
      queryUserInfo(data).then(res => {
        const infoList = res.data.infoList
        if(infoList) infoList.forEach(item => {
          if( this.to.uid === item.uid ) {
            this.to = item
          } else if( this.from.uid === item.uid ) {
            this.from = item
          }
        })

        this.toFriends = this.from.friends.split(',')
        console.log(`friends`, this.toFriends)
        this.inFriends()
      })
    },
    queryRecordList() {
      const data = {
        uid: this.from.uid,
        to: this.to.uid,
      }
      queryAllRecord(data).then(res => {
        console.log(`record`, res.data.data.record)
        this.recordList = res.data.data.record
        this.recordList.map(item => {
          if ( item.from == this.from.uid ) {
            item.from = this.from
            item.to = this.to
          } else if ( item.from == this.to.uid ) {
            item.from = this.to
            item.to = this.from
          }
        })
      })
    },
    addRecord() {
      if ( this.val ) {
        const data = {
          from: this.from.uid,
          to: this.to.uid,
          msg: this.val
        }
        addRecordApi(data).then(res => {
          console.log(res)
          this.queryRecordList()
          this.val = ''
        })
      } else {
        Message({ message: '请输入内容!', type: 'error', duration: 5 * 1000, showClose: false, dangerouslyUseHTMLString: true })
      }
    },
    addFriend() {
      const data = {
        uid: this.from.uid,
        id: this.to.uid,
        friends: this.from.friends
      }
      console.log(data)
      addFriendsApi(data).then(res => {
        if(res.data.data.state === 'succ') {
          this.$message({
            message: 'ta已经是好友啦，快去和ta聊天吧！',
            type: 'success'
          });
          this.queryUserInfo()
        } else {
          this.$message({
            message: '出错啦！',
            type: 'error'
          });
        }
      })
    },
    inFriends() {
      let count = 0
      this.toFriends.forEach(item => {
        if(item === this.to.uid) count ++
      })

      if( count == 0 ) this.show=true
      else this.show=false
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
#talk {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  .title {
    position: sticky;
    top: 0;
    text-align: center;
    height: 40px;
    line-height: 40px;
    box-shadow: 0 0 10px rgb(233, 233, 233);
  }

  #talkBtn {
    position: sticky;
    bottom: 0;
    height: 60px;
    background: rebeccapurple;
    min-height: 60px;
  }

  
  #record {
    $h: 100vh;
    min-height: calc(#{$h} - 100px);
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
    overflow-y: scroll;
  }
}

.left {
  float: left;
  margin: 10px;
  cursor: pointer;
}

.center {
  display: flex;
  justify-content: center;
  height: 100%;

  *{
    margin: auto;
  }
}

</style>